<template>
	<view>
		<view :class="'comp-btn ' + (isSelectState == 1 ? 'comp-btn-select' : '') " @click="onSelectBtnClick">
			{{showText}}
		</view>
		<hqs-popup title="弹窗标题" v-model="showScreenPopup" from="right" :width="screenPopWidth" height="80vh">
			<screenContent @changePopWidth="changePopWidth" :showText="showText" :originListData="originListData"
				@onCloseClick="onPopupCloseClick"></screenContent>
		</hqs-popup>
	</view>

</template>

<script>
	import hqsPopup from '@/components/hqs-popup/hqs-popup';
	import screenContent from '@/pages/thickness/_components/screenContent.vue';
	export default {
		components: {
			hqsPopup,
			screenContent
		},

		props: {
			showText: {
				type: String,
				default: ''
			},

			originListData: {
				type: Array,
				default: () => {
					return [];
				}
			}
		},

		data() {
			return {
				showScreenPopup: false, // select dialog 弹出
				isSelectState: 0, // 是否是select状态
				screenPopWidth: '80vw', // 窗口宽度
			}
		},

		methods: {
			onSelectBtnClick() {
				console.log("onSelectBtnClick")
				this.$emit("onSelectPopupShow");
				this.showScreenPopup = true;
				
			},

			changePopWidth(e) {
				this.screenPopWidth = e;
			},

			/**
			 * 关闭弹窗 
			 * @param {Object} e 
			 */
			onPopupCloseClick(e) {
				if (getApp().globalData.thickIndexScreenUnselectList.length > 0) {
					this.isSelectState = 1;
				} else
					this.isSelectState = 0;
				this.$emit("updateByScreen");
				this.showScreenPopup = false;
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.comp-btn {
		box-sizing: border-box;
		font-size: 11upx;
		padding: 8upx 9upx;
		// height: 25upx;
		color: #0062B0;
		background: #FFFFFF;
		font-weight: 500;
		border-radius: 1upx;
		border: 1px solid #0062B0;
	}

	.comp-btn-select {
		color: #ff0000;
		border-radius: 1upx;
		border: 1px solid #ff0000;
	}
</style>
